<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>奶茶点单程序</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            padding: 20px;
        }
        h2 {
            text-align: center;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin-bottom: 10px;
        }
        button {
            padding: 10px 20px;
            background-color: #4CAF50C;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45A049;
        }
        .cart-item {
            margin-bottom: 5px;
        }
        .total {
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>出来饮茶啦！</h2>
        <h3>奶茶菜单</h3>
        <ul>
            <li v-for="item in items" :key="item.id">
                {{ item.name }} - {{ item.price }}元
                <button @click="addItem(item)">加入购物车</button>
            </li>
        </ul>
        <h3>购物车</h3>
        <ul v-if="cart.length > 0">
            <li v-for="item in cart" :key="item.id" class="cart-item">
                {{ item.name }} - {{ item.price }}元 x {{ item.quantity }}
                <button @click="removeItem(item)">移除</button>
            </li>
        </ul>
        <div v-else>
            购物车为空
        </div>
        <div>当前共：{{ cartTotal数量 }} 杯奶茶</div>
        <div>合计：{{ totalPrice }} 元</div>
        <button @click="clearCart">清空购物车</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                items: [
                    { id: 1, name: '原味奶茶', price: 5 },
                    { id: 2, name: '红豆奶茶', price: 9 },
                    { id: 3, name: '珍珠奶茶', price: 11 },
                    { id: 4, name: '奥利奶茶', price: 14 },
                    { id: 5, name: '波利奶茶', price: 16 }
                ],
                cart: []
            },
            computed: {
                totalPrice() {
                   return this.cart.reduce((sum, item) => sum + item.price * item.quantity, 0).toFixed(2);
               },
                cartTotal数量() {
                   return this.cart.reduce((sum, item) => sum + item.quantity, 0);
               }
            },
            methods: {
                addItem(item) {
                    const found = this.cart.find(i => i.id === item.id);
                    if (found) {
                        found.quantity++;
                    } else {
                        this.cart.push({ ...item, quantity: 1 });
                    }
                },
                removeItem(item) {
                    const index = this.cart.findIndex(i => i.id === item.id);
                    if (index !== -1) {
                        this.cart[index].quantity--;
                        if (this.cart[index].quantity === 0) {
                            this.cart.splice(index, 1);
                        }
                    }
                },
                clearCart() {
                    this.cart = [];
                }
            }
        });
    </script>
</body>
</html>